<template>
  <div class="registerInfo-container">
    <modules-title title-name="销售明细">
      <template slot="btn">
<!--        <el-button class="border-btn">导出</el-button>-->
      </template>
    </modules-title>
    <div class="main">
      <div class="searchBar">
        <el-form inline :model="storage">
          <el-form-item label="就诊时间">
            <el-date-picker
              class="searchBar_picker"
              value-format="yyyy-MM-dd"
              @input="dataIn"
              v-model="date"
              type="daterange"
              range-separator="-"
              :picker-options="pickerOptions"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <!--          <el-form-item label="类型">-->
          <!--            <el-select v-model="storage.option_type" @change="oncahngeTy" class="searchBar_select">-->
          <!--              <el-option-->
          <!--                v-for="item in option_typeList"-->
          <!--                :key="item.value"-->
          <!--                :label="item.label"-->
          <!--                :value="item.value"-->
          <!--              >-->
          <!--              </el-option>-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="付款方式">-->
          <!--            <el-select v-model="storage.pay_type" @change="oncahngePy" class="searchBar_select">-->
          <!--              <el-option-->
          <!--                v-for="item in pay_typeList"-->
          <!--                :key="item.value"-->
          <!--                :label="item.label"-->
          <!--                :value="item.value"-->
          <!--              >-->
          <!--              </el-option>-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="收费员">-->
          <!--            <el-input-->
          <!--              placeholder="搜索收费员"-->
          <!--              @change="inputNane"-->
          <!--              @keyup.enter.native="userNameKey"-->
          <!--              clearable-->
          <!--              v-model="storage.user_name">-->
          <!--              <i slot="prefix" class="el-input__icon el-icon-search"></i>-->
          <!--            </el-input>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item>-->
          <!--            <el-button type="primary" @click="search" class="main-btn">查询</el-button>-->
          <!--          </el-form-item>-->
        </el-form>
      </div>
      <div class="table">
        <el-card shadow="never" class="card_n1">
          <div class="box">
            <p class="p1">销售预览</p>
            <ul class="ul">
              <li>
                <p class="p2"><span style="font-size:24px">￥</span>{{sum_amount | moneyFormat}}</p>
                <p class="p3">应付金额</p>
              </li>
              <li>
                <p class="p2"><span style="font-size:24px">￥</span>{{refund_amount | moneyFormat}}</p>
                <p class="p3">应退金额</p>
              </li>
              <li>
                <p class="p2"><span style="font-size:24px">￥</span>{{profit | moneyFormat}}</p>
                <p class="p3">实收金额</p>
              </li>
            </ul>
          </div>
        </el-card>
        <el-table
          :data="tableData"
          :default-sort="{prop: 'created_at', order: 'descending'}"
          border
          :header-cell-style="{
                        backgroundColor: '#F5F5F5',
                        color: '#333333',
                        fontFamily: 'MicrosoftYaHeiUI',
                        fontSize: '14px',
                        fontWeight: 900,
                    }"
        >
          <el-table-column type="expand">
            <template #default="{row}">
              <div class="big">
                <div class="box"
                     v-if=" row.charge_content.check_items !== null && row.charge_content.check_items.length > 0 ">
                  <p class="container-title">检查治疗项</p>
                  <el-table :data="row.charge_content.check_items">

                    <el-table-column label="检查名称" width="320" prop="check_item_name" align="center"></el-table-column>
                    <el-table-column label="单价" align="center">
                      <template #default="{row}">
                        <span class="price">￥ {{row.price | moneyFormat}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="数量" prop="check_item_number" align="center"></el-table-column>
                    <el-table-column label="金额" align="center">
                      <template #default="{row}">
                        <span class="price">￥ {{row.amount | moneyFormat}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column></el-table-column>
                    <el-table-column></el-table-column>
                  </el-table>

                </div>
                <div class="box"
                     v-if=" row.charge_content.surcharges !== null && row.charge_content.surcharges.length > 0 ">
                  <p class="container-title">附加费用</p>
                  <el-table :data="row.charge_content.surcharges">
                    <el-table-column label="费用名称" prop="surcharge_name" width="320" align="center"></el-table-column>
                    <el-table-column label="单价" align="center">
                      <template #default="{row}">
                        <span class="price">￥ {{row.cost_price | moneyFormat}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="金额" align="center">
                      <template #default="{row}">
                        <span class="price">￥ {{row.amount | moneyFormat}}</span>
                      </template>
                    </el-table-column>

                    <el-table-column></el-table-column>
                    <el-table-column></el-table-column>
                    <el-table-column></el-table-column>
                  </el-table>
                </div>
                <div class="box" v-for="(item,index) in row.charge_content.prescription_ary" :key="index">
                  <p class="container-title"> 处方{{index + 1}} </p>
                  <el-table :data="item.details">
                    <el-table-column label="产品名称" width="320" prop="product_name" align="center"></el-table-column>
                    <el-table-column label="规格包装" prop="pack" align="center"></el-table-column>
                    <el-table-column label="厂家" prop="production" align="center"></el-table-column>
                    <el-table-column label="单价" align="center">
                      <template #default="{row}">
                        <span class="price">￥ {{row.price | moneyFormat}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="数量" align="center">
                      <template #default="{row}">
                        <span> {{row.number}}{{row.unit}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="金额" align="center">
                      <template #default="{row}">
                        <span class="price">￥ {{row.amount | moneyFormat}}</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="收费时间" prop="created_at" sortable width="272" align="center">
            <template #default="{row}">
              {{row.created_at | dateFormat}}
            </template>
          </el-table-column>
          <el-table-column label="类型" align="center">
            <template #default="{row}">
              <span v-if="row.charge_type === 1">挂号</span>
              <span v-else>门诊</span>
            </template>
          </el-table-column>
          <el-table-column prop="doctor_name" label="医生名称" align="center"></el-table-column>
          <el-table-column prop="real_name" label="患者名称" align="center"></el-table-column>
          <el-table-column prop="user_name" label="收费员名称" align="center"></el-table-column>
          <el-table-column label="应收金额" align="center">
            <template #default="{row}">
              <span class="price">￥ {{row.amount | moneyFormat}}</span>
            </template>
          </el-table-column>
          <el-table-column label="优惠金额" align="center">
            <template #default="{row}">
              <span class="price">￥ {{row.dis_amount | moneyFormat}}</span>
            </template>
          </el-table-column>
          <el-table-column label="实收金额" align="center">
            <template #default="{row}">
              <span class="price" v-if="row.option_type === 1">收费   ￥{{row.receipts_amount | moneyFormat}}</span>
              <span class="price" v-else-if="row.option_type === 2">退费   ￥{{row.receipts_amount | moneyFormat}} </span>
            </template>
          </el-table-column>
          <el-table-column label="付款方式" align="center">
            <template #default="{row}">
              <span v-if="row.pay_type === 1">现金</span>
              <span v-else-if="row.pay_type === 2">支付宝</span>
              <span v-else-if="row.pay_type === 3">微信</span>
              <span v-else-if="row.pay_type === 4">医保卡</span>
            </template>
          </el-table-column>

        </el-table>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="storage.pager.number"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="storage.pager.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import {getSalesDetail} from '@/api/statistical';

  export default {
    data() {
      return {
        date: '',
        storage: {
          start_time: '',
          end_time: '',
          pay_type: 0,
          user_name: '',
          option_type: 0,
          pager: {
            number: 1,
            size: 10
          }
        },
        option_typeList: [
          {
            value: 0,
            label: '全部'
          },
          {
            value: 1,
            label: '收费'
          },
          {
            value: 2,
            label: '退费'
          },
        ],
        pay_typeList: [
          {
            value: 0,
            label: '全部'
          },
          {
            value: 1,
            label: '现金'
          },
          {
            value: 2,
            label: '支付宝'
          },
          {
            value: 3,
            label: '微信'
          },
          {
            value: 4,
            label: '银行卡'
          },
          {
            value: 5,
            label: '医保卡'
          },
        ],
        total: 0,
        refund_amount: 0,
        sum_amount: 0,
        profit: 0,
        tableData: [],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      }
    },
    created() {
      this.getSalesDetailData()
    },
    mounted() {
      var date = new Date();
      var year = date.getFullYear()
      var month = date.getMonth() + 1;
      month = (month < 10 ? '0' + month : month)
      var day = date.getDate();
      day = (day < 10 ? '0' + day : day)
      this.storage.start_time = this.storage.end_time = `${year.toString()}-${month.toString()}-${day.toString()}`
      this.date = [this.storage.start_time, this.storage.end_time]
    },
    methods: {
      //时间事件
      dataIn(e) {
        this.$nextTick(() => {
          if (e == null) {
            this.storage.start_time = ''
            this.storage.end_time = ''
            this.storage.pager.number = 1
            this.getSalesDetailData()
          } else {
            this.$set(this, "date", [e[0], e[1]]);
            this.storage.start_time = e[0]
            this.storage.end_time = e[1]
            this.storage.pager.number = 1
            this.getSalesDetailData()
          }
        })
      },
      //类型事件
      oncahngeTy(e) {
        this.storage.option_type = e
        this.storage.pager.number = 1
        this.getSalesDetailData()
      },
      //支付方式事件
      oncahngePy(e) {
        this.storage.pay_type = e
        this.storage.pager.number = 1
        this.getSalesDetailData()
      },
      //收费员事件
      inputNane(e) {
        this.$nextTick(_ => {
          if (e === null) {
            this.storage.user_name = ''
            this.storage.pager.number = 1
            this.getSalesDetailData()
          } else {
            this.storage.user_name = e
            this.storage.pager.number = 1
            this.getSalesDetailData()
          }
        })
      },
      //收费员回车
      userNameKey(e) {
        let keyCode = window.event ? e.keyCode : e.which
        if (keyCode === 13 && this.storage.user_name) {
          this.storage.pager.number = 1
          this.getSalesDetailData()
        }
      },
      //查询
      search() {
        this.storage.pager.number = 1
        this.getSalesDetailData()
      },
      //获取数据
      getSalesDetailData() {
        getSalesDetail(this.storage).then(res => {
          if (res.code === 200) {
            this.refund_amount = res.data.refund_amount
            this.profit = res.data.profit
            this.sum_amount = res.data.sum_amount
            this.tableData = res.data.data || []
            this.total = res.data.total

          }
        })
      },
      //条数
      handleSizeChange(val) {
        this.storage.pager.size = val
        this.getSalesDetailData()
      },
      //页码
      handleCurrentChange(val) {
        this.storage.pager.number = val
        this.getSalesDetailData()
      },

    }
  }
</script>

<style scoped lang="scss">
  @import "@/assets/scss/statistical/salesDetail.scss";

  ::v-deep #bigDialog > .el-dialog > .el-dialog__header {
    background: none !important;
  }

  ::v-deep .el-table__expanded-cell[class*="cell"] {
    padding: 0 !important;
  }
</style>
